<!--
 * @Author: your name
 * @Date: 2021-04-06 19:50:35
 * @LastEditTime: 2021-05-21 10:33:40
 * @LastEditors: Please set LastEditors
 * @Description: 个人中心 => 临床试验
 * @FilePath: /medicine-web/src/views/user/modules/clinical.vue
-->
<template>
  <div class="user-clinical">
    <div v-if="resultList && resultList.length > 0">
      <div class="main-search__result-item" v-for="item in resultList" :key="item.id">
        <ul class="main-search__result-content">
          <li @click.stop="navToDetail(item.external_id)">
            <span>{{item.title}}</span>
          </li>
          <li>
            <span v-if="item.registration_no">临床注册号:</span>
            <span v-if="item.registration_no" style="margin-left: 12px">{{item.registration_no}}</span>
          </li>
          <li>
            <span v-if="item.organization" style="margin-right: 12px;">开展机构:</span>
            <span v-if="item.organization" style="margin-right: 39px;">{{item.organization}}</span>
            <span v-if="item.recruit" style="margin-right: 12px;">招募状态:</span>
            <span v-if="item.recruit" style="margin-right: 39px;">{{item.recruit}}</span>
            <span v-if="item.stage" style="margin-right: 12px;">临床阶段:</span>
            <span v-if="item.stage">{{item.stage}}</span>
          </li>
          <li v-html="item.experimental_group">
          </li>
          <li class="main-search__result-func">
            <span>
              <span v-if="item.start_time && item.end_time">研究时间：{{item.start_time}} ~ {{item.end_time}}</span>
            </span>
            <span>
              <customBtn2 @handleClick="btnClick(item)"></customBtn2>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div v-else>
      <emptyData></emptyData>
    </div>
    <Pagation v-if="resultList && resultList.length > 0" v-model="pageNum" :total="100"  @handlePage="handlePage" style="margin-top: 48px"></Pagation>
  </div>
</template>
<script>
import customBtn2 from '@/components/CustomBtn2/index'
import Pagation from '@/components/Pagation/index'
import emptyData from '@/components/EmptyData/index'
export default {
  name: 'userClinical',
  components: { customBtn2, Pagation, emptyData },
  data () {
    return {
      total: 0,
      pageNum: 1,
      resultList: []
    }
  },
  methods: {
    navToDetail (id) {
      this.$router.push({ path: '/clinical/detail', query: { id } })
    },
    async btnClick (rawData) {
      console.log('btnClick', rawData)
      const res = await this.$action('cancelCollection', { user_id: this.getCookie('uid'), id: rawData.id })
      if (res) {
        this.msgSuccess('取消收藏成功')
        this.fetchData()
      } else {
        this.msgError('取消收藏失败')
      }
    },
    handlePage (count) {
      this.pageNum = count
      this.fetchData()
    },
    async fetchData () {
      const res = await this.$action('getUserCollection', { page: this.pageNum, limit: 10, user_id: this.getCookie('uid'), module: 1 })
      console.log('res', res)
      if (res && Object.keys(res).length > 0) {
        this.resultList = res.data_list
        this.total = res.total_number || 0
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.user-clinical {
  /deep/ .ant-pagination {
    text-align: right;
  }
  .main-search__result-item {
    @include flex-def;
    .main-search__result-content {
      width: 100%;
      margin-left: 8px;
      li:nth-child(n+2) {
        margin-top: 10px;
        font-size: 14px;
        color: #555;
      }
      li:nth-child(1) {
        font-size: 14px;
        color: #555;
        font-weight: bold;
        cursor: pointer;
      }
      .main-search__result-func {
        @include flex-def;
        @include flex-cCenter;
        @include flex-zBetween;
      }
    }
  }
}
</style>